<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta
            content="width=device-width, initial-scale=1, maximum-scale=1"
            name="viewport"
    />
    <title>Vue Accessible</title>
    <link
            href="/demo/assets/images/favicon.ico"
            rel="icon"
    />
</head>
<body>
<script>
    const path = window.location.pathname
    const pathLocale = path.startsWith('/en-US')
        ? 'en-US'
        : path.startsWith('/zh-CN')
            ? 'zh-CN'
            : undefined

    function deriveTitleFromLocale(locale = navigator.language) {
        if (locale === 'zh-CN') {
            document.title = 'Vue Accessible：Vue3 无障碍/适老化小插件'
        } else {
            document.title = 'Vue Accessible: Web accessibility tools for Vue3'
        }
    }

    deriveTitleFromLocale(pathLocale)
</script>
<div id="app">
    <style>
        #app {
            width: 100vw;
            height: 100vh;
            padding: 0;
            margin: 0;
        }

        @-webkit-keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes pulse {
            50% {
                background: white;
            }
        }

        @keyframes pulse {
            50% {
                background: white;
            }
        }

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        #app {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #333333;
        }

        .loading {
            border-radius: 50%;
            width: 24px;
            height: 24px;
            border: 0.25rem solid rgba(255, 255, 255, 0.2);
            border-top-color: white;
            -webkit-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
        }
    </style>
    <div class="loading"></div>
</div>
<script src="__INDEX__" type="module"></script>
</body>
</html>
